<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head>
<title>CloudCom</title>

<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<link rel="stylesheet" href="styles/computer.css" type="text/css"/>

<script type="text/javascript" src="scripts/computer.js"></script>

</head>
<body id="top" onload="initialization()">
<div id="header">
  <div class="wrapper">
    <div class="fl_left">
      <h1><a href="#">CloudCom</a></h1>
      <p>Make the Earth Smarter</p>
    </div>
    <div class="fl_right"> <a href="#"><img src="images/demo/banner1.jpg" alt="cloudcom" width="468" height="70"/></a> </div>
    <br class="clear" />
  </div>
</div>

<div id="topbar">
  <div class="wrapper">
    <div id="topnav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li class="active"><a href="cloudcom.html">Customer</a></li>
        <li><a href="customer.php">Services</a></li>
        <li><a href="showCart.php">Cart</a>
        </li>
        <li class="last"><a href="login.html">Employees</a></li>
      </ul>
    </div>
    <br class="clear" />
  </div>
</div>

<div id="breadcrumb">
  <div class="wrapper">
  	<p style="color:red">The field with label * is required</p>
  </div>
</div>

<div id="container">
  <div class="wrapper">
    <div id="content">
    	<div id="order">
        <!-- The first form for customer info-->
<div id="divCustomer" style="display:block">


    <form method="post" name="customer" id="form1" onsubmit="return nextForm()" action="customerRegister.php">

	<div class="order">
    <h2>Personal Information</h2>
  <p>
  	<span class="redStar">*</span> First Name:
    <span class="rightAlign">
    	<input type="text" name="firstName" maxlength="10" />
        <input type="image" class="leftAlign" src="images/demo/question.jpg" alt="info" width="20" height="20" onmouseover="fnOver()" onmouseout="fnOut()"/>
    	<span class="comment" id="fnComment">max length of characters is 10</span>
    	<span id="fnMsg" class="comment" style="color:red"></span>
    </span>
  </p>
  
  <p><span class="redStar">*</span> Last Name:
    <span class="rightAlign">
    	<input type="text" name="lastName" maxlength="10" />
    	<input type="image" class="leftAlign" src="images/demo/question.jpg" alt="info" width="20" height="20" onmouseover="lnOver()" onmouseout="lnOut()" />
    	<span class="comment" id="lnComment">max length of characters is 10</span>
        <span id="lnMsg" class="comment" style="color:red"></span>
  </span>
  </p>
  
  <p><span class="redStar">*</span> Email:
    <span class="rightAlign">
    	<input type="text" name="email" maxlength="50" />
        <input type="image" class="leftAlign" src="images/demo/question.jpg" alt="info" width="20" height="20" onmouseover="emailOver()" onmouseout="emailOut()" />
        <span class="comment" id="emailComment">valid email address is required</span>
        <span id="emailMsg" class="comment" style="color:red"></span>
    </span>
  </p>
  
  <p><span class="redStar">*</span> Password:
    <span class="rightAlign">
    	<input type="password" name="password"  maxlength="10" />
        <input type="image" class="leftAlign" src="images/demo/question.jpg" alt="info" width="20" height="20" onmouseover="passwordOver()" onmouseout="passwordOut()" />
        <span class="comment" id="passwordComment">passwrod must be at least 10 chars</span>
        <span id="passwordMsg" class="comment" style="color:red"></span>
    </span>
  </p>
  
  <p><span class="redStar">*</span> Repeat password:
    <span class="rightAlign"><input type="password" name="repeatPassword" maxlength="10" />
    <span id="repeatMsg" class="comment" style="color:red"></span>
    </span>
  </p>
  
  <p>Home phone number:
    <span class="rightAlign"><input type="text" name="homePhone1" size="3" maxlength="3" /> -
    <input type="text" name="homePhone2" size="3" maxlength="3" /> -    
    <input type="text" name="homePhone3" size="4" maxlength="4" />
    <span class="comment" style="display:inline">eg. (626)-241-7880</span></span>
  </p>
  <p>Cell phone number:
    <span class="rightAlign"><input type="text" name="cellPhone1" size="3" maxlength="3" /> -
    <input type="text" name="cellPhone2" size="3" maxlength="3" /> -
    <input type="text" name="cellPhone3" size="4" maxlength="4" />
    <span class="comment" style="display:inline">eg. (626)-241-7880</span></span>
  </p>
  </div>
  
  <div class="order">
  <h2>Home Address</h2>
  <p>Street:<input type="text" class="rightAlign" name="street" maxlength="20" /></p>
  <p>City:
  <select name="city">
  	<option disabled="disabled">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
  </select>
  State:
  <select name="state" onchange="updateCity()">
  	<option value="-1" disabled="disabled"></option>
    <option value="0">California</option>
    <option value="1">New York</option>
    <option value="2">Texas</option>
    <option value="3">Massachusetts</option>
  </select>
  <span class="redStar">*</span>
  Zip:
  <input type="text" name="zip" size="7" maxlength="5"/><span id="zipMsg" class="comment" style="color:red"></span>
  </p>
  </div>
      
    <input type="submit" class="buttonStyle" value="Register" id="nextform" onmouseover="changeOn(this)" onmouseout="changeOff(this)" />
  
</form>

</div>


<!-- The second form for computer order-->
<div id="divComputer" style="display:none">

<form method="post" name="computerForm" id="form2">

	<div id="core" class="order">
    <h2>Critical Elements</h2>
	<p>
    <span class="redStar">*</span>
  	<b>Processor</b><span id="processorMsg" class="message"></span><br />
  	<input type="radio" name="processor" value="3.3" />3.3GHz
  	<input type="radio" class="rightShift" name="processor" value="3.6" /><span class="rightShiftMove">3.6GHz</span>
  	<input type="radio" class="rightShift2" name="processor" value="3.7" /><span class="rightShiftMove2">3.7GHz</span></p>

	<p>
	<span class="redStar">*</span>
  	<b>Memory</b><span id="memoryMsg" class="message"></span><br />
  	<input type="radio" name="memory" value="6" />6GB
  	<input type="radio" class="rightShift" name="memory" value="8" /><span class="rightShiftMove">8GB</span>
  	<input type="radio" class="rightShift2" name="memory" value="12" /><span class="rightShiftMove2">12GB</span></p>

	<b>Video Card</b><p id="videoMsg" class="message"></p>
    <select name="company" onchange="updateVideoCard()">
    	<option value="-1" disabled="disabled"></option>
    	<option value="0">NVidia</option>
        <option value="1">AMD</option>
        <option value="2">Intel</option>
    </select>
    
	<select name="video">
		<option value="-1" disabled="disabled">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
	</select>
	<br />
	
    <p>
	<b>LCD display</b><span id="lcdMsg" class="message"></span><br />
	<input type="radio" name="lcd" value="1" />1600*900 60Hz
	<input type="radio" class="rightShift" name="lcd" value="2" /><span class="rightShiftMove">1920*1080 60Hz</span>
	<input type="radio" class="rightShift2" name="lcd" value="3" /><span class="rightShiftMove2">1920*1080 120Hz</span></p>
	
    <p>
	<b>Operating System</b><span id="osMsg" class="message"></span><br />
	<input type="radio" name="os" value="home" />Win7 Home
	<input type="radio" class="rightShift" name="os" value="pro" /><span class="rightShiftMove">Win7 Pro</span>
	<input type="radio" class="rightShift2" name="os" value="ultimate" /><span class="rightShiftMove2">Win7 Ultimate</span></p>
	</div>

	<div id="accessary" class="order">
    <h2>Most Popular Add-ons</h2>
	<p>
    <b>Monitors</b><br />
	<input type="checkbox" name="kvm" value="dell1" />Dell 24'' Full HD
	<input type="checkbox" class="rightShift" name="kvm" value="dell2" /><span class="rightShiftMove">Dell KM632</span>
	<input type="checkbox" class="rightShift2" name="kvm" value="dell3" /><span class="rightShiftMove2">Alienware Keyboard</span>		</p>

	<p>
	<span class="redStar">*</span>
	<b>Power and Battery</b><span id="powerMsg" class="message"></span><br />
	<input type="checkbox" name="power" value="cell1" />240W Power Adapter
	<input type="checkbox" class="rightShift" name="power" value="cell2" /><span class="rightShiftMove">9-cell Li-ion battery</span>
	<input type="checkbox" class="rightShift2" name="power" value="cell3" /><span class="rightShiftMove2">12-cell Li-ion battery</span></p>

	<b>Wireless Router</b><br />
	
    	<select name="router" multiple="multiple">
            <option value="0">Netgear WiFi0</option>
            <option value="1">Netgear WiFi1</option>
            <option value="2">Netgear WiFi2</option>
            <option value="3">Netgear WiFi3</option>
            <option value="4">Netgear WiFi4</option>
        </select>

	<p>
	<span class="redStar">*</span>
	<b>Software</b><span id="softwareMsg" class="message"></span><br />
    	<select name="software" multiple="multiple">
            <option value="Microsoft">Microsoft Office</option>
            <option value="McAFree">McAFree Security</option>
            <option value="Adobe">Adobe CS6</option>
            <option value="Blizzard">Diablo 3</option>
            <option value="Activision">Call of Duty - Mordern Warfare</option>
        </select>
    </p>
	</div>
    
    <b>Comments</b>
	<br /><textarea name="description" rows="10" cols="40" onfocus="clearTextArea()">Pls write additional comment about your custom designed gaming computer</textarea>
	
    <p>
    <input type="button" class="buttonStyle" value="Place Order" onmouseover="changeOn(this)" onmouseout="changeOff(this)" onclick="placeOrder()" />
    <input type="button" class="buttonStyle" value="Go Back" onmouseover="changeOn(this)" onmouseout="changeOff(this)" onclick="goBack()" />
    </p>

</form>
</div>

<div id="customerReport" style="display:none">
<p id="customerInfo"></p>
<p><input type="button" class="buttonStyle" value="Return to Customer Form" onmouseover="changeOn(this)" onmouseout="changeOff(this)" onclick="returnToCustomer()" /></p>
<table id="customerTable" border="1">
	<tr>
    	<thead class="theadStyle">
	    	<td>First Name</td>
    	    <td>Last Name</td>
        	<td>Email</td>
        	<td>Password</td>
        	<td>Zip</td>
        	<td>Order</td>
        </thead>
    </tr>
</table>
</div>

<div id="computerReport" style="display:none">
<p id="computerInfo"></p>
<p><input type="button" class="buttonStyle" value="Return to Order Report" onmouseover="changeOn(this)" onmouseout="changeOff(this)" onclick="returnToReport()" /></p>
<table id="computerTable" border="1">
	<tr>
    	<thead>
    		<td>Processor</td>
            <td>Memory</td>
            <td>Graphics Card</td>
            <td>Power</td>
            <td>Software</td>
    	</thead>
     </tr>
</table>
</div>
    </div>	
    </div>
    <br class="clear" />
  </div>
</div>

<div id="footer">
  <div class="wrapper">
  	<div class="footbox">
      <h2>About</h2>
      <ul>
        <li><a href="#">CloudCom</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Announcements</a></li>
        <li><a href="#">Blogs</a></li>
        <li class="last"><a href="#">Contacts</a></li>
      </ul>
    </div>
    <div class="footbox">
      <h2>Support</h2>
      <ul>
        <li><a href="#">Premium Support</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Discussion</a></li>
        <li class="last"><a href="#">Support</a></li>
      </ul>
    </div>
    <div class="footbox">
      <h2>Developers</h2>
      <ul>
        <li><a href="#">Java</a></li>
        <li><a href="#">Mobile</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">Python</a></li>
        <li class="last"><a href="#">.Net</a></li>
      </ul>
    </div>
    <div class="footbox">
      <h2>Learn</h2>
      <ul>
        <li><a href="#">Case Studies</a></li>
        <li><a href="#">Whitepapers</a></li>
        <li><a href="#">Seminars</a></li>
        <li><a href="#">Tutorials</a></li>
        <li class="last"><a href="#">Webminars</a></li>
      </ul>
    </div>
    <br class="clear" />
  </div>
</div>

<div id="copyright">
  <div class="wrapper">
    <p class="fl_left">Copyright &copy; 2012 - All Rights Reserved - <a href="#">www.cloudcom.com</a></p>
    <p class="fl_right"><a href="#">Reference OS Template</a></p>
    <br class="clear" />
  </div>
</div>
</body>
</html>
